<!doctype html>
<html>
	<head>
		<meta content="text/html; charset=UTF-8" http-equiv="content-type" />
		<meta name="viewport" content="width=device-width,initial-scale=1">
		
		<script type="text/javascript" src="../../dist/jmgraph.js"></script>
	</head>
	<body style="width:800px;margin:10px auto;border:1px solid blue;">
		<div id="mycanvas" style="border:1px solid red;margin:10px;width:100%;height:600px;"></div>
		<div id="eventposition"></div>

		<img id="dataimg" />
	</body>
	<script type="text/javascript">	
		
		var g = jmGraph.create('mycanvas', {
			width: 800,
			height: 600
		});

		init(g);

		function update() {
			if(g.needUpdate) g.redraw();
			requestAnimationFrame(update);
		}

		update();
		
			
		function init(graph){
			graph.style.fill = '#000';
			var style = {
				stroke:'#CF781450',
				lineWidth:5,
				close:true
			};
			style.shadow = '0,0,5,#fff';
			style.opacity = 0.8;
			//graph.createShadow('shadow(0,0,10,#000)');//new jmShadow('shadow(10,10,20,#000)');
			//style.shadow = graph.createShadow(4,4,6,'#000000');
			style.lineCap = 'round';

			var line = graph.createLine({x:10,y:200},{x:80,y:120},style);
			
			line.bind('mouseover',function(evt) {
				this.style.stroke = 'rgba(39,72,188,0.5)';
				this.cursor = 'pointer';
				this.needUpdate = true;
			});
			line.bind('mouseleave',function(evt) {
				this.style.stroke = 'rgb(120,20,80)';
				this.cursor = 'default';
				this.needUpdate = true;
			});
			line.bind('touchstart',function(evt) {
				console.log('touchstart',evt);
			});
			line.bind('touchmove',function(evt) {
				console.log('touchmove',evt);
			});
			line.bind('touchend',function(evt) {
				console.log('touchend',evt);
			});
			
			graph.children.add(line);
			line.canMove(true);
			

			style = graph.utils.clone(style);
			delete style['rotation'];
			
			style.lineType = "dotted";
			style.dashLength = 4;
			style.lineWidth = 2;
			line = graph.createLine({x:5,y:5},{x:200,y:250},style);
			style.zIndex = 20;
			graph.children.add(line);
			line.bind('mouseover',function(evt) {
				this.style.stroke = 'rgba(39,72,188,0.5)';
				//graph.canvas.style.cursor = 'pointer';
				this.needUpdate = true;
			});
			line.bind('mouseleave',function(evt) {
				this.style.stroke = 'rgb(120,20,80)';
				//graph.canvas.style.cursor = 'default';
				this.needUpdate = true;
			});
			line.canMove(true);
			


			style = graph.utils.clone(style);	
			/*var bg = graph.createLinearGradient(0,0,0,100);
			bg.addStop(0,'rgb(0,0,0)');
			bg.addStop(1,'rgb(150,200,180)');*/
			style.fill = 'linear-gradient(0 0 0 100,#000 0,#73998A 1)';
			style.close = true;
			var rect = 	graph.createPath(null,style);
			rect.points.push({x:20,y:20});
			rect.points.push({x:20,y:100});
			rect.points.push({x:100,y:100});
			rect.points.push({x:100,y:20});
			graph.children.add(rect);

			style = graph.utils.clone(style);
			//style.fill = 'rgba(220,100,80,1)';
			//delete style.fill;
			//style.close = true;
			var path = graph.createPath(null,style);
			path.points.push({x:10,y:10});
			path.points.push({x:10,y:60});
			path.points.push({x:80,y:20});
			path.points.push({x:90,y:80});				
			//path.points.push({x:80,y:20});
			path.points.push({x:80,y:80});
			
			rect.children.add(path);

			//rect.children.add(line);

			path.bind('mouseover',function(evt) {
				this.style.stroke = 'rgba(39,72,188,0.5)';
				this.needUpdate = true;
				//graph.canvas.style.cursor = 'pointer';
				
			});
			path.bind('mouseleave',function(evt) {					
				this.style.stroke = 'rgb(120,20,80)';
				this.needUpdate = true;
				//graph.canvas.style.cursor = 'default';
			});
			
			rect.canMove(true);
			//line.canMove(true);
			path.canMove(true);	
			
		}
			
		
	</script>
</html>